<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>用户更新</title>
  <link rel="shortcut icon"   th:href="@{/favicon.ico}"  type="image/x-icon" />
  <link rel="stylesheet"   th:href="@{/css/font.css}">
  <link rel="stylesheet"   th:href="@{/css/xadmin.css}" >
  <script type="text/javascript"  src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
  <script th:src="@{/lib/layui/layui.js}"  charset="utf-8"></script>
  <script th:src="@{/js/xadmin.js}"   type="text/javascript"  ></script>
</head>
<body>

<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
    <legend>资料修改</legend>
</fieldset>
<form class="layui-form" action="" lay-filter="example">
    <div class="layui-form-item">
        <label class="layui-form-label">用户登录名</label>
        <div class="layui-input-block">
            <input type="hidden" name="id" id="id" th:value="${user.id}"  >
            <input type="text" name="uname" lay-verify="title"  th:value="${user.uname}"  autocomplete="off"  class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">密码框</label>
        <div class="layui-input-block">
            <input type="text" name="upass"  placeholder="请输入密码" th:value="${user.upass}" lay-verify="upass" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">用户真实姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" lay-verify="title"  th:value="${user.name}"  autocomplete="off" placeholder="用户真实姓名" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择级别</label>
        <div class="layui-input-block">
            <select name="level" lay-filter="level" th:if="${user.level}  eq 1" >
                <option value="1"  selected>用户</option>
                <option value="2" >管理员</option>
            </select>
            <select name="level" lay-filter="level" th:if="${user.level}  eq 2" >
                <option value="1"   >用户</option>
                <option value="2" selected>管理员</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">选择角色</label>
        <div class="layui-input-block">
            <select name="roleid" lay-filter="roleid">
                <option value="2">用户</option>
                <option value="1">管理员</option>
                <option value="3">vip用户</option>
                <option value="4">test用户</option>
            </select>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">性别</label>
        <div class="layui-input-block" th:if="${user.gender} eq 男 ">
            <input type="radio" name="gender" value="男" title="男" checked>
            <input type="radio" name="gender" value="女" title="女">
        </div>
        <div class="layui-input-block" th:if="${user.gender} eq 女 ">
            <input type="radio" name="gender" value="男" title="男" >
            <input type="radio" name="gender" value="女" title="女" checked>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">头像</label>
        <div class="layui-input-block">
            <button type="button"  class="layui-btn" id="upload-but">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img id="headpic"  style="width:100px" />
            <input type="hidden" th:value="${user.headimg}" id="headimg" name="headimg">
        </div>
    </div>
    <div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">修改</button>
        </div>
    </div>
</form>
</body>
</html>


<script>

    $(function(){
       var imgsrc  =  $("#headimg").val();
        imgsrc = "../"+imgsrc
        $("#headpic").attr("src", imgsrc);
    });

    layui.use(['form', 'layedit', 'laydate','upload'], function(){
        var form = layui.form
            ,layer = layui.layer
            ,layedit = layui.layedit
            ,laydate = layui.laydate
            ,upload = layui.upload;

        //头像上传模块
        var uploadInst = upload.render({
            elem: '#upload-but' //绑定元素
            ,url: '../upload' //上传接口
            ,done: function(res){
                // layer.msg("上传成功"+res.data.src);
                $("#headpic").attr("src","../"+"downpic?fileName="+res.data.src);
                $("#headimg").val("downpic?fileName="+res.data.src);
            }
            ,error: function(){
                //请求异常回调
                layer.msg("上传失败了"+res.data.src);
            }
        });
        //日期
        laydate.render({
            elem: '#date'
        });
        laydate.render({
            elem: '#date1'
        });

        //创建一个编辑器
        var editIndex = layedit.build('LAY_demo_editor');

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 3){
                    return '标题至少得3个字符啊';
                }
            }
            ,upass: [
                /^[\S]{2,12}$/
                ,'密码必须2到12位，且不能出现空格'
            ]
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });

        //监听提交
        form.on('submit(demo1)', function(data){
            $.ajax({
                type:"post",
                dataType:"JSON",
                url:"../update",
                data:data.field,
                success:function(data){
                    layer.msg(data.msg, {
                        icon: 1,
                        time: 1000
                    }, function() {
                        var index = parent.layer.getFrameIndex(window.name);
                        //关闭当前frame
                        parent.layer.close(index);
                    });
                },error:function(){
                    layer.msg("接口没进去")
                }
            })
            return false;
        });

    });
</script>
